<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script type="text/javascript" src="js/global.js"></script>
	<link rel="stylesheet" href="./layui/css/layui.css" media="all">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
<div hidden="hidden" class="layui-form-item" style="margin-top: 20px">
	<label class="layui-form-label">ID：</label>
	<div class="layui-input-inline" style="width: 350px">
		<input type="text" name="id" id="userid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
	</div>
</div>
</div>
<div style="margin-top: 20px" id="test4" class="demo-transfer"></div>
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--<legend>数据格式解析</legend>-->
<!--</fieldset>-->

<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
	layui.use(['transfer', 'layer', 'util', 'form'], function() {
		var $ = layui.$,
				transfer = layui.transfer,
				layer = layui.layer,
				form = layui.form,
				util = layui.util;
		//解决跨域
		$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
			options.xhrFields = {
				withCredentials: true
			}
		})
		var userroles = []; //存储用户拥有的角色
		var datass = []; //存储所有角色id名称
		var datas = []; //存储所有角色id名称
		var ids = []; //用来存储角色id
		function getReole() { //延迟加载

			var userid = document.getElementById("userid").value; //当前用户的id
			$.ajax({
				url: globalData.server + "./section/getAllSectionByUserId", //根据用户拿到所有角色
				type: 'post',
				dataType: 'json',
				data: {
					"userId": userid
				},
				success: function(data) {
					console.log(data)
					/* userroles.push("" + data.id + ""); */
					console.log(data.id)
					for(var i in data) {
						userroles.push("" + data[i].id + ""); //拿到的数据放入数组中
					}

				},
				error: function(e) {
					alert('请求失败1')
				}
			});
			$.ajax({
				url: globalData.server + './section/getAllSection', //拿到所有部门
				type: 'post',
				dataType: 'json',
				success: function(data) {
					for(var i in data.data) {
						datas = { //存储所有角色id名称
							value: data.data[i].id, //角色的id id是自己数据库的id名
							title: data.data[i].sname //角色名称
						}
						datass.push(datas); //把拿到的所有角色id名称 放到数组
					}

					setTimeout(function() {
						//穿梭时的回调
						transfer.render({
							elem: '#test4',
							data: datass,
							title: ['系统所有部门', '当前用户部门'],
							value: userroles,
							onchange: function(obj, index) {
								for(var i in obj) {
									ids.push(obj[i].value)
								}
								var arr = ['系统所有角色', '当前用户角色'];
								//layer.alert('来自 <strong>' + arr[index] + '</strong> 的数据：' + JSON.stringify(obj)); //获得被穿梭时的数据
								if(arr[index] == '系统所有角色') {
									$.ajax({
										url: globalData.server + 'usersection/addUsersByIdSection', //用户添加角色
										type: 'post',
										dataType: 'json',
										data: {
											"userId": userid, //用户id
											"sid": ids, //角色id
											'ids': JSON.stringify(ids),
										},
										success: function(data) {
											//												alert(data.msg);
											ids = [];
										},
										error: function(e) {
											alert('请求失败2')
										}
									});
								} else {
									$.ajax({
										url: globalData.server + 'usersection/removeUsersByIdSection', //用户移除角色
										type: 'post',
										dataType: 'json',
										data: {
											"userId": userid, //用户id
											"sid": ids, //角色id
											'ids': JSON.stringify(ids)
										},
										success: function(data) {
											//												alert("成功");
											ids = [];
										},
										error: function(e) {
											alert('请求失败3')
										}
									});
								}

							}
						})
					}, 500);
				},
				error: function(e) {
					alert('请求失败')
				}
			});
		}
		setTimeout(function() {
			//					延迟加载
			getReole();
		}, 500);
	});
</script>

</body>

</html>